@extends('admin::layouts.master')
@section('head')
    <link rel="stylesheet" href="{{asset('/addons/Weixin/Resources/assets/css/menu.css')}}">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="card" id="menu">
        <div class="card-header">微信菜单管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/weixin/wx_menu" class="nav-link">微信菜单列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加微信菜单</a></li>
        </ul>
        <form action="/weixin/wx_menu" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                <div class="row">
                    <div class="col-sm-4">
                        <div class="mobile">
                            <div class="menu-container">
                                <div class="space"></div>
                                <div class="menu" v-for="(v,k) in menus">
                                    <h5 title="点击选中可在右侧编辑" @click="setActive(v,k,-1)" :class="k==main&&(current==-1||current==undefined)?'wx_menu_active':''">
                                        <i title="删除此菜单" class="fa fa-minus-square" aria-hidden="true" @click.prevent.stop="del(k)"></i>
                                        <span>@{{v.name}}</span>
                                    </h5>
                                    <dl class="mb-0">
                                        <dd title="点击选中可以在右侧窗口进行编辑" :class="n==current&&k==main?'wx_menu_active':''" v-for="(m,n) in v.sub_button" @click.prevent="setActive(m,k,n)">
                                            <i title="删除此菜单" class="fa fa-minus-square" @click.prevent.stop="delsub(v,n)" aria-hidden="true"></i>
                                            <span>@{{ m.name}}</span>
                                        </dd>
                                        <dd title="添加子菜单，最多能添加5个" class="sub_add" v-if="v.sub_button.length<5" @click.stop.prevent.self="addsub(v,k)">
                                            <i @click="addsub(v,k)"></i>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="menu" @click.stop.prevent="add()" v-if="menus.length<3">
                                    <h5 class="main_add" title="添加主菜单">
                                        <i></i>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="card">
                            <div class="card-header">
                                菜单设置
                            </div>
                            <div class="card-block">
                                <div class="form-group row">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">名称</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" required name="name" placeholder="请输入名称..." class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <div class="card-block">
                                <div class="form-group row">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">菜单名称</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input ref="count" required type="text" v-model="active.name" value="" placeholder="请输入菜单名称，长度最多四位" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="form-group row pt-1 pb-1">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">动作</label>
                                    <div class="col-12 col-sm-8 col-lg-6 form-check mt-2">
                                        <label class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" v-model="active.type" value="view"
                                                   class="custom-control-input"><span
                                                    class="custom-control-label">链接</span>
                                        </label>
                                        <label class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" v-model="active.type" value="click"  class="custom-control-input"><span
                                                    class="custom-control-label">关键词</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group row" v-if="active.type=='view'">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">链接</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" required v-model="active.url" value="" placeholder="请输入链接地址..." class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="form-group row" v-if="active.type=='click'">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">关键词</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" required v-model="active.key" value=""  placeholder="请输入回复关键词..." class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <textarea name="data" hidden>@{{ menus }}</textarea>
                            <div class="card-footer text-muted">
                                <button class="btn btn-primary offset-sm-2">保存菜单</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        require(['{{asset("addons/Weixin/Resources/assets/js/menu.js")}}'],function(index){
            // console.log(index);
            index([]);
        });
    </script>
@endsection
